<template>
  <div>
    <el-dialog
      title="工单信息"
      :visible.sync="visible"
      width="70%"
      :before-close="handleClose"
    >
      <div id="loading-wrap">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="工单派单" name="first">
            <el-descriptions border>
              <el-descriptions-item v-for="(item, index) in descriptionsList" :key="index" :label="item.label">{{ item.value }}</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="抵押派单" name="second">
            <el-descriptions border>
              <el-descriptions-item v-for="(item, index) in descriptionsList" :key="index" :label="item.label">{{ item.value }}</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
        </el-tabs>
      </div></el-dialog>
  </div>
  </div>
</template>
<script>
import request from '@/utils/request'
export default {
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      descriptionsList: [],
      activeName: 'first'
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          setTimeout(() => {
            this.getInfo()
            this.openFullScreen2()
          }, 300)
        }
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('handleClose')
    },
    handleClick(val) {
      this.openFullScreen2()
      if (val.index == '0') {
        this.getInfo(0)
        return
      }
      if (val.index == '1') {
        this.getInfo(1)
        return
      }
    },
    getInfo(type = 0) {
      request({ url: 'system/work-order/detailByApplyId', method: 'get', params: { applyId: this.id, type: type }}).then(({ data }) => {
        if (data) {
          // 处理第二个内容
          const arr = [
            { label: '申请产品', value: data.productName }, { label: '客户姓名', value: data.clientName }, { label: '客户电话', value: data.clientPhone },
            { label: '车牌号', value: data.carNumber }, { label: '车架号', value: data.vin }, { label: '现场联系人', value: data.sceneContactName },
            { label: '现场联系人电话', value: data.sceneContactPhone }, { label: '安装时间', value: data.handleDate }, { label: '安装地点', value: data.address },
            { label: '交付方式', value: data.mode }, { label: '备注', value: data.remark }
          ]
          const arr1 = [
            { label: '申请产品', value: data.productName }, { label: '客户姓名', value: data.clientName }, { label: '客户电话', value: data.clientPhone },
            { label: '车牌号', value: data.carNumber }, { label: '车架号', value: data.vin }, { label: '现场联系人', value: data.sceneContactName },
            { label: '现场联系人电话', value: data.sceneContactPhone }, { label: '办理时间', value: data.handleDate }, { label: '办理地点', value: data.address },
            { label: '办押资料交互方式', value: data.mode }, { label: '身份证返还方式', value: data.mode }, { label: '身份证寄回地址', value: data.mode }, { label: '备注', value: data.remark }
          ]
          this.descriptionsList = type == '0' ? arr : arr1
        }
      }).finally(() => {
        this.loadingState.close()
      })
    },

    openFullScreen2() {
      const loading = this.$loading({
        lock: true,
        target: '#loading-wrap'
      })
      this.loadingState = loading
    }
  }
}
</script>
<style>
</style>
